
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>goconvert web</title>
</head>
<body>
	<h1>Viewing index</h1>

	<div>Testing page, port {{.WebPort |html}}</div>

	<h1>Image conversion and upload tool</h1>
	<section id="imagefolder">
		<label for="folder">Image folder</label> <input id="folder"
			name="folder" type="text" value="" />
	</section>
	<section id="collectionname">
		<label for="collection">Collection name</label> <input id="collection"
			name="collection" type="text" value="" />
	</section>
	<section id="logsection">
		<span>Output log</span>
		<div id="outputlog"></div>
	</section>
	<section id="errorsection">
		<span>Error log</span>
		<div id="errors" style="color:maroon;font-weight: bold;">
		
		</div>
	</section>
	
	
	<script type="text/javascript" src="scripts/jquery-2.0.3.js"></script>
	<script>
		var convertModule = (function(mod) {
			mod.settings =  JSON.parse('{{.SettingsAsJson}}');
			return mod
		})(convertModule || {});
	
		$(function(){
			$('#folder').val(convertModule.settings && convertModule.settings.homeDir);
		});
	</script>
	
	<script type="text/javascript" src="scripts/socket.js"></script>
	<script type="text/javascript" src="scripts/play.js"></script>
	
	<script>
		
		/*
		$(function(){
			var pollHandler = function(op, poll_interval_msec, timeout_msec){
				t = 0;
				var doPoll = function(){
				    $.ajax('/' + op +'/status', {
							data: null,
							type: "POST",
							dataType: "json",
							success: function(data) {
						        //alert(data);  // process results here
						        if (!data.eof && t < timeout_msec) {
						        	writeLog(data.messages);
						        	t += poll_interval_msec;
						        	setTimeout(doPoll,poll_interval_msec);
						        } else if (data.eof) {
						        	writeLog(data.messages);
						        	writeLog('finished');
						        } else {
						        	writeLog('timed out');					        	
						        }
							},
							error: function() {
								alert('error');
							}
						});
					};
					
				return doPoll;
			};
		
			
			$('#compress').click(function() {
				
				settings.sourceDir = $("#folder").val(); 
				settings.collName = $("#collection").val();
					
				$.ajax("/compress", {
					data:  JSON.stringify(settings),
					type: "POST",
					dataType: "json",
					success: function(data) {
						if (!data) {
							return;
						}
						if (data.compile_errors && data.compile_errors.length>0) {
							//setOutput(data.compile_errors, true);
							highlightErrors(data.compile_errors);
							return;
						}
						pollfunc = pollHandler("compress", 1000, 1000000);
						clearLog();
						writeLog(data.messages);
						pollfunc();
					},
					error: function() {
						alert('error');
					}
				});
			});
			 
			 $('#cancel').click(function() {
					
					$.ajax("/cancel", {
						data:  null,
						type: "POST",
						dataType: "json",
						success: function(data) {
							if (!data) {
								return;
							}
							if (data.compile_errors && data.compile_errors.length>0) {
								//setOutput(data.compile_errors, true);
								highlightErrors(data.compile_errors);
								return;
							}
							writeLog(data.messages);
						},
						error: function() {
							alert('error');
						}
					});
				});
			
			var logdiv = $('#log');
			var errordiv = $('#errors');
			var clearLog = function(){
				logdiv.empty();
				errordiv.empty();
			}
			var writeLog = function(messages){
				addLinesToDiv(messages, logdiv);
			};
			var highlightErrors = function(errors){
				errordiv.empty();
				addLinesToDiv(errors, errordiv);
			};
			
			var addLinesToDiv = function(lines, div){
				var i;
				if (typeof lines === 'string'){
					lines = [lines];					
				}
				if(!lines){return;}
				for(i = 0;i< lines.length;i++){
					div.append('<p>' + lines[i] + '</p>');
				}
				
			};
		});
		*/
		
	</script>
</body>
</html>

